<template>
  <scroll-view scroll-x class="menus">
    <view
      class="menus_item"
      @tap="clickMenu(index, item)"
      v-for="(item, index) in menus"
      :key="item.id"
    >
      <text class="menu_name">{{ item.name }}</text>
      <text class="line" :class="{ clickAc: ac === index }"></text>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref } from "vue";
import store from "@/store";
const ac = ref(0);
const emit = defineEmits(["changeMenus"]);
const menus = store.getters.menusTabs || []
// const menus = ref([
//   { name: "收文流转", id: 0 },
//   { name: "收文阅办", id: 1 },
//   { name: "阅办代理", id: 2 },
//   { name: "公文接收", id: 3 },
//   { name: "通知接收", id: 4 },
// ]);
// ("收文流转", "收文阅办", "阅办代理", "公文接收", "通知接收")
const clickMenu = (index, item) => {
  ac.value = index;
  emit("changeMenus", item);
};
</script>

<style lang="scss">
.menus {
  display: flex;
  width: 100%;
  white-space: nowrap;
  margin: 20rpx auto 15rpx;

  .menus_item {
    flex: 1;
    position: relative;
    color: #fff;
    font-size: 30rpx;
    padding: 15rpx 15rpx;
    display: inline-block;

    .line {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 35%;
      height: 4rpx;
      background-color: transparent;
    }

    .clickAc {
      background-color: #fff;
    }
  }
}
</style>
